.button{
  border-radius: var(--radius);
  font-size: var(--form-small-font);
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-property: border-color,background,color,transform,box-shadow;
  transition-duration: .15s;
  transition-timing-function: ease;
  line-height: var(--form-line-height);
  background: var(--foreground);
  color: var(--background);
  border: 1px solid;
  border-color: var(--foreground);
  padding: 0 var(--gap-half);
}
.button:hover{
  color:  var(--foreground);
  border-color: var();
  background-color: var(--background);
}
.button[type='small']{
  height: var(--form-small-height);
}
.button[type='primary'] {
  height: var(--form-height);
}
.button[type='large'] {
  height: var(--form-large-height);
}